<template>
	<view>
		<!-- 导航条 -->
		<!-- #ifdef MP-WEIXIN -->
		<u-navbar height="90" bgColor="#0081ff">
			<!-- #ifdef MP-WEIXIN -->
			<view class="u-nav-slot margin-top-xl" slot="left">
			</view>
			<!-- #endif -->
			<view class="u-nav-slot margin-top-xl text-xl" slot="center">修改定时任务</view>
			<view class="u-nav-slot margin-top-xl" slot="right">
				<u-icon v-if="task.status == 0" name="pause-circle" size="32" color="#ffffff" @tap="pauseTask()">
				</u-icon>
				<u-icon v-else name="reload" size="32" color="#ffffff" @tap="recoveryTask()"></u-icon>
				<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
				<u-icon name="trash" size="32" color="#ca0000" @tap="delTask()"></u-icon>
			</view>
		</u-navbar>
		<!-- #endif -->
		<!-- #ifdef H5 ||  APP-PLUS -->
		<!-- 导航条 -->
		<u-navbar height="60" bgColor="#0081ff">
			<view class="u-nav-slot" slot="left">
				<u-icon name="arrow-left" size="32" color="#ffffff" @tap="isBack"></u-icon>
			</view>
			<view class="u-nav-slot" slot="center">修改定时任务</view>
			<view class="u-nav-slot" slot="right">
				<u-icon v-if="task.status == 0" name="pause-circle" size="32" color="#ffffff" @tap="pauseTask()"></u-icon>
				<u-icon v-else name="reload" size="32" color="#ffffff" @tap="recoveryTask()"></u-icon>
				<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
				<u-icon name="trash" size="32" color="#ca0000" @tap="delTask()" style="margin-left: 5px;"></u-icon>
			</view>
		</u-navbar>
		<!-- #endif -->
		<view>
			<view>
				<view class="padding-sm text-xxl ">选择执行动作</view>
				<view>
					<view class="scrollx_items flex justify-center align-center">
						<view class="padding bg-white text-center light bg-blue device-list ">
							<image class="margin-top-sm" :src="imgUrl + button.image" style="width: 5vh;height: 5vh;">
							</image>
							<text class="margin-top-sm">{{button.buttonName}}</text>
						</view>
					</view>
				</view>
			</view>
			<view>
				<view class="padding-sm margin-top-sm text-xxl flex">设定执行指令：
					<radio-group class="block flex margin-left-sm" @change="RadioChange">
						<view class="flex">
							<view class="title">开启</view>
							<radio class="margin-left-sm" :class="radio=='open'?'checked':''"
								:checked="radio=='open'?true:false" value="open">
							</radio>
						</view>
						<view class="flex margin-left-sm">
							<view class="title">关闭</view>
							<radio class="margin-left-sm" :class="radio=='off'?'checked':''"
								:checked="radio=='off'?true:false" value="off">
							</radio>
						</view>
					</radio-group>
				</view>
			</view>
			<view>
				<view class="padding-sm margin-top-sm text-xxl ">设定执行时间</view>
				<view class=" text-sl bg-white" style="border: #FFFFFF solid 2rpx;">
					<picker class="margin-left-xl" mode="time" :value="time" start="0:0" end="23:59"
						@change="TimeChange">
						<view class="picker">
							{{time}}
						</view>
					</picker>
				</view>
			</view>
			<view>
				<view class="padding-sm margin-top-sm text-xxl ">重复设置</view>
				<view class=" text-sm">
					<checkbox-group class="block flex justify-center" @change="CheckboxChange">
						<view style="margin-left: 30rpx;" v-for="(item,index) in checkbox">
							<view class="title">{{item.name}}</view>
							<checkbox class="round margin-top-sm" :class="item.checked?'checked':''"
								:checked="item.checked?true:false" :value="item.value"></checkbox>
						</view>
					</checkbox-group>
				</view>
			</view>
		</view>

		<view class="flex  justify-center cu-bar tabbar bg-white shadow foot" @tap="updateTask">
			<view class="text-blue text-xl">修改设定</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgUrl: this.imgUrl,
				task: {
					status: null,
				},
				button: {
					image: null,
					buttonName: null,
				},
				time: '00:00',
				radio: null,
				cron: [],
				checkbox: [{
					value: 'SUN',
					name: '星期日',
					checked: false
				}, {
					value: 'MON',
					name: '星期一',
					checked: false
				}, {
					value: 'TUE',
					name: '星期二',
					checked: false
				}, {
					value: 'WED',
					name: '星期三',
					checked: false
				}, {
					value: 'THU',
					name: '星期四',
					checked: false
				}, {
					value: 'FRI',
					name: '星期五',
					checked: false
				}, {
					value: 'SAT',
					name: '星期六',
					checked: false
				}],
			}
		},
		onLoad(option) {
			this.jobId = option.jobId
			this.getTask()
		},
		methods: {
			// 保存定时设置
			updateTask() {
				if (this.radio != null) {
					this.$http.request({
						url: 'app/task/upButtonTask',
						method: 'POST',
						data: {
							'jobId': this.jobId,
							'deviceId': this.button.deviceId,
							'buttonId': this.button.buttonId,
							'instruct': this.radio,
							'time': this.time,
							'cron': this.cron
						},
						success: (data) => {
							if (data.data && data.data.code == 0) {
								uni.navigateBack({
									delta: 1
								})
							}
						}
					})
					this.cron.splice(0, this.cron.length);
				} else {
					uni.showToast({
						title: "请补全相关参数后，再设置定时",
						icon: "none",
						position: 1000
					})
				}
			},
			// 删除定时任务
			delTask() {
				let that = this
				uni.showModal({
					content: '危险操作，是否继续！',
					success: function(res) {
						if (res.confirm) {
							that.$http.request({
								url: 'app/task/delTask',
								method: 'GET',
								data: {
									'jobId': that.jobId
								},
								success: (data) => {
									if (data.data && data.data.code == 0) {
										uni.navigateBack({
											delta: 1
										})
									}
								}
							})
						} else if (res.cancel) {}
					}
				})
			},
			pauseTask() {
				this.$http.request({
					url: 'app/task/pauseTask',
					method: 'GET',
					data: {
						'jobId': this.jobId
					},
					success: (data) => {
						if (data.data && data.data.code == 0) {
							uni.navigateBack({
								delta: 1
							})
						}
					}
				})
			},
			recoveryTask() {
				this.$http.request({
					url: 'app/task/recoveryTask',
					method: 'GET',
					data: {
						'jobId': this.jobId
					},
					success: (data) => {
						if (data.data && data.data.code == 0) {
							uni.navigateBack({
								delta: 1
							})
						}
					}
				})
			},
			//获取设备对应的按键列表
			getTask() {
				this.$http.request({
					url: 'app/task/getTask',
					method: 'GET',
					data: {
						'jobId': this.jobId
					},
					success: (data) => {
						if (data.data && data.data.code == 0) {
							this.button = data.data.button
							let task = data.data.task
							this.task = task,
								this.radio = task.instruct
							this.time = task.time
							this.setCheckbox(task.week)
						}
					}
				})
			},
			setCheckbox(values) {
				var items = this.checkbox
				let select = values.split(',')
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					items[i].checked = false;
					for (var j = 0, lenJ = select.length; j < lenJ; ++j) {
						if (items[i].value == select[j]) {
							items[i].checked = true;
							this.cron = select
							break
						}
					}
				}
			},
			//获取时间
			TimeChange(e) {
				this.time = e.detail.value
			},
			// 选择执行的指令
			RadioChange(e) {
				this.radio = e.detail.value
			},
			// 选择星期
			CheckboxChange(e) {
				var items = this.checkbox,
					values = e.detail.value;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					items[i].checked = false;
					for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
						if (items[i].value == values[j]) {
							items[i].checked = true;
							this.cron = values
							break
						}
					}
				}
			},
			isBack() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style>
	.device-list {
		width: 7rem;
		height: 7rem;
		border: #DDDDDD solid 2px;
		border-radius: 50%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
</style>
<style lang="scss">
	.u-nav-slot {
		@include flex;
		align-items: center;
		justify-content: space-between;
		border-width: 0.5px;
		border-radius: 100px;
		border-color: $u-border-color;
		padding: 3px 7px;
		opacity: 0.8;
	}
</style>
